package com.example.navigation_inclusive

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.compose.rememberNavController
import com.example.navigation_inclusive.graph.Navgraph
import com.example.navigation_inclusive.ui.theme.ComposeNewStudyTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeNewStudyTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    //MainScreen(modifier = Modifier.padding(innerPadding))

                    VerificationCodeInput(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    Navgraph(navController = navController)
}

@Preview(
    showBackground = true,
    name = "LandScape",
    device = "spec:shape=Normal,width=640,height=360,unit=dp,dpi=480"
)
@Composable
fun GreetingPreview() {
    ComposeNewStudyTheme {
        MainScreen()
    }
}





@Composable
fun VerificationCodeInput(modifier: Modifier = Modifier) {
    var code by remember { mutableStateOf("") }
    val maxLength = 6
    val focusRequester = remember { FocusRequester() }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            repeat(maxLength) { index ->
                VerificationCodeCell(
                    value = code.getOrNull(index)?.toString() ?: "",
                    isFocused = index == code.length,
                    isCompleted = code.length == maxLength
                )
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        BasicTextField(
            value = code,
            onValueChange = {
                if (it.length <= maxLength) code = it.filter { it.isDigit() }
            },
            modifier = Modifier
                .size(0.dp)
                .focusRequester(focusRequester),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            textStyle = MaterialTheme.typography.bodyLarge.copy(fontSize = 0.sp)
        )
    }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
}

@Composable
fun VerificationCodeCell(value: String, isFocused: Boolean, isCompleted: Boolean) {
    val animatedColor by animateColorAsState(
        targetValue = when {
            isCompleted -> Color.Green
            isFocused -> Color.Blue
            else -> Color.Gray
        },
        animationSpec = tween(durationMillis = 300)
    )

    val animatedSize by animateFloatAsState(
        targetValue = if (value.isNotEmpty()) 1f else 0.8f,
        animationSpec = spring(stiffness = Spring.StiffnessLow)
    )

    Box(
        modifier = Modifier
            .size(50.dp)
            .clip(MaterialTheme.shapes.medium)
            .background(animatedColor.copy(alpha = 0.1f))
            .padding(2.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = value,
            style = MaterialTheme.typography.bodyLarge,
            color = animatedColor,
            textAlign = TextAlign.Center,
            modifier = Modifier.scale(animatedSize)
        )
    }
}